<template>
  <div id="withdrawdeposit" class="withdrawdeposit same-change-oldstyle">
    <div class="same-head-box" style="border-bottom:0px">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>业绩管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/withdrawdeposit' }">余额提现</el-breadcrumb-item>
            <el-breadcrumb-item>提现记录</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
      </div>
    </div>
    <div class="headtx_box same-table-box">
      <div class="balance">
        账户余额
        <span class="balspan">{{userinfo.account_balance | filterNumber}}</span> 元
        <el-button style="margin-left: 10px;" type="primary" @click="jumpbalance" size="small">提 现</el-button>
        <!-- <button class="btnb_style" @click="jumpbalance" type="button">提现</button> -->
      </div>

      <div class="same-search-box" style="margin-top: 10px;">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span same-search-fisrt">申请时间：</span>
              <el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="开始日期">
              </el-date-picker>
              <div class="same-interval">至</div>
              <el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="same-left-one" v-if="!moveShow">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
                  :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
              <el-button type="primary" size="medium" @click="findyueList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
        <!-- 搜索更多 -->
        <div>
          <div class="same-search-left new-sear-height" ref="leftHeight">
            <div class="same-left-one">
              <span size="medium" class="same-search-span">审核状态：</span>
              <el-select v-model="chooseType" placeholder="请选择" @change='choosedropdown($event)' style="width: 140px;">
                <el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
                  :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
              <el-button type="primary" size="medium" @click="findyueList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
      </div>

      <div class="table_box">
        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
            :data="tableData" stripe>
            <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
            <el-table-column align="center" prop="create_time" label="申请时间">
            </el-table-column>

            <el-table-column align="center" label="申请金额">
              <template slot-scope="scope">
                {{scope.row.withdraw_money|filtersCard}}
              </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip  align="center" label="打款卡号">
              <template slot-scope="scope">
                <!-- filtersCard -->
                {{scope.row.p_sn}}
              </template>
            </el-table-column>

            <el-table-column align="center" :formatter="formatAuditPeople" label="审核人">
            </el-table-column>

            <el-table-column align="center" prop="withdraw_status" label="审核状态">
            </el-table-column>

            <el-table-column align="center" prop="audit_time" label="审核时间">
            </el-table-column>

            <el-table-column align="center" label="打款状态">
              <template slot-scope="scope">
                <el-tag size="mini" type="success" v-if="scope.row.state == 2">已打款</el-tag>
                <el-tag size="mini" type="warning" v-else>未打款</el-tag>
              </template>
            </el-table-column>

            <el-table-column align="center" :formatter="formatPayWay" label="打款方式">
            </el-table-column>

            <el-table-column align="center" prop="pay_time"  label="打款时间">
              <template slot-scope="scope">
                {{scope.row.pay_time || "——"}}
              </template>
            </el-table-column>

            <el-table-column align="center" show-overflow-tooltip prop="withdraw_note" label="备注">
            </el-table-column>
            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>

          <div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
              layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
          </div>
        </div>
      </div>
     
    </div>
  </div>
</template>
<script>
  export default {
    name: "withdrawdeposit",
    data: function () {
      return {
        loading: false, //加载动画
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,-----
        currentPage: 2, //当前页数
        chooseType: "", //选择类别
        stateoption: [
          {
            value: "",
            label: "全部"
          },
          {
            value: "1",
            label: "未审核"
          },
          {
            value: "2",
            label: "审核通过"
          },
          {
            value: "3",
            label: "驳回申请"
          }
        ],
        userinfo: {},
        date1: '',
        date2: '',
        isLoad: false,

        moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
        moveShow: false,//是否开启动画
        scrollHeight: '',//需要监听的高度
      };
    },
    computed: {},

    // 初始化执行
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      var that = this;
      that.getPartner();
      if (that.date1 != null) {
        var start_time = that.date1;//开始时间
        var end_time = that.date2;//结束时间
      }
      var jf_type = that.chooseType; //类型
      var page = that.pageNo; // 当前页
      var pageSize = that.pageSize; // 每页条数
      that.balanceList(page, pageSize, start_time, end_time, jf_type); // 获取积分管理页面数据
    },
    inject: [
      'reload'
    ],
    methods: {

      formatAuditPeople(row) {
        return row.audit_people ? row.audit_people : '待审核'
      },

      formatPayWay(row) {
        if (row.pay_type == 1) {
          return "微信/企业打款"
        } else if (row.pay_type == 2) {
          return "支付宝";
        } else {
          return "--"
        }
      },

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      //获取合伙人信息
      getPartner() {
        var that = this;
        that.$post({
          url: "Partner/Setup/get_partner",
          data: {},
          success: function (data) {
            that.userinfo = data.data;
          }
        });
      },
      //提现
      jumpbalance() {
        this.$router.push({
          path: "/withdrawMoney"
        });
      },

      //重置
      reset() {
        this.date1 = "";
        this.date2 = "";
        this.chooseType = "";
        this.pageNo = 1;
        this.balanceList(this.pageNo, this.pageSize);
      },
      //搜索
      findyueList() {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1;//开始时间
          var end_time = that.date2;//结束时间
        }
        var jf_type = that.chooseType; //类型
        that.pageNo = 1;
        var page = that.pageNo; // 当前页
        var pageSize = that.pageSize; // 每页条数
        that.balanceList(page, pageSize, start_time, end_time, jf_type);
      },
      //订单类型
      choosedropdown(Type) {
        this.chooseType = Type;
      },
      //每页
      handleSizeChange(val) {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1;//开始时间
          var end_time = that.date2;//结束时间
        }
        var jf_type = that.chooseType; //类型
        that.pageNo = 1;
        var page = that.pageNo; // 当前页
        that.pageSize = val; // 当前每页显示条数
        that.balanceList(page, val, start_time, end_time, jf_type); // 获取积分管理页面数据
      },
      //分页
      handleCurrentChange(val) {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1;//开始时间
          var end_time = that.date2;//结束时间
        }
        var jf_type = that.chooseType; //类型
        var pageSize = that.pageSize; // 每页条数
        that.pageNo = val;
        that.balanceList(val, pageSize, start_time, end_time, jf_type); // 获取积分管理页面数据
      },
      // 获取余额提现页面数据
      balanceList: function (page, pageSize, start_time, end_time, jf_type) {
        this.loading = true; //打开loading动画
        this.isLoad = false; //是否加载
        var that = this;
        // ajax请求
        that.$post({
          url: "Partner/Achievement/applicationCashList",
          data: {
            status: jf_type,
            start_time: start_time ? start_time : '',
            end_time: end_time ? end_time : '',
            page: page,
            row: pageSize
          },
          success: data => {
            that.isLoad = true;
            that.loading = false; //关闭动画
            if (data.code == 1000) {
              that.tableData = data.data.data; // 清空数据
              that.totalDataNumber = Number(data.data.page.total_number); // 总的数据
            }
          }
        });
      },
      //此处获取高度必须在dom元素创建完成之后才能获取
      gitHeight() {
        //  let clientHeight=this.$refs.leftHeight.clientHeight;
        let scrollHeight = this.$refs.leftHeight.scrollHeight;
        this.scrollHeight = scrollHeight;
        scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

      },
      openMore() {
        this.moveShow = !this.moveShow;
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      },
    },
    mounted() {
      this.gitHeight();
      //监听高度变化 
      var that = this;
      window.addEventListener("resize", function () {
        let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
        that.scrollHeight = scrollHeight;
      });
    },
    watch: {
      // 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
      scrollHeight: function (val) {
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      }
    }
  };
</script>
<style scoped>
  #withdrawdeposit {
    width: 100%;
    height: 100%;
    background: #fff;
  }

  #withdrawdeposit .same-title-box {
    padding: 15px 0;
  }

  /* 头部搜索 */

  .headtx_box {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
  }

  #withdrawdeposit .same-search-box {
    padding-top: 0 !important;
  }

  .balance {
    padding-top: 20px;
  }

  .balance .btnb_style {
    border: none;
    width: 70px;
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    background: #275485;
    margin-left: 40px;
    border-radius: 4px;
  }

  .balspan {
    color: #FF6565;
    font-weight: bold;
    font-size: 22px;
  }
</style>